<script setup lang="ts">
import { ref } from "vue"
import { Calendar } from 'v-calendar';
import 'v-calendar/style.css';

const attrs = ref<any>([
  {
    key: 'test',
    highlight: {
      color: 'blue',
      fillMode: 'light'
    },
    dates: new Date(),
    content: { style: { color:  'brown',} },
    popover: {
      label: '今天学习时长: ' + 2 + 'h',
      visibility: 'click',
      hideIndicator: true,
    },
  }
]);
</script>

<template>
  <Calendar expanded
            ref="calendar"
            :attributes="attrs"
            title-position="left"
            :max-date="new Date()"
            class="calender-util"
            />
</template>

<style scoped lang="scss">
.calender-util{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>